<template>
  <view class="content">
    <view class="top">
      <view class="status_bar">
        <image src="https://qn.boruichengyi.com/static/index/images/indebg.png" mode=""></image>
      </view>

      <view class="mine">{{ otheruserinfo.nickname }}</view>
      <view class="portrait">
        <view class="set">
          <!-- <image src="" mode=""></image> -->
        </view>
        <view class="portrait_logo">
          <view class="logo">
            <image :class="{ userself: !followshow }" :src="otheruserinfo.avatar" mode="aspectFill"></image>
            <view v-show="followshow" @click="tofans(otheruserinfo.id)" :class="{ follow: true, already: otheruserinfo.is_fans == 1 }">
              {{ otheruserinfo.is_fans == 0 ? '关注' : '已关注' }}
            </view>
          </view>
          <view class="message">{{ otheruserinfo.company }}</view>
          <view class="school">毕业学校：{{ otheruserinfo.school }}</view>
        </view>
      </view>
    </view>
    <view class="main">
      <!-- 我的资料 -->
      <view class="myinformation">
        <view class="title">
          <view class="h2">
            <view class="line"></view>
            <text>TA的资料</text>
          </view>
          <view class="icon">
            <image src="https://qn.boruichengyi.com/static/index/icon/edit.png" mode=""></image>
          </view>
        </view>
        <view class="detailinfor">
          <view class="age">年龄：{{ otheruserinfo.age }}岁</view>
          <view class="sex">性别：{{ otheruserinfo.gender == 0 ? '女' : '男' }}</view>
          <view class="addres">现居：{{ otheruserinfo.residence_province }}</view>
          <view class="education">学历：{{ otheruserinfo.education_texts }}</view>
        </view>
      </view>
      <!-- 我的爱好 -->
      <view class="myhobies">
        <view class="title">
          <view class="h2">
            <view class="line"></view>
            <text>TA的爱好</text>
          </view>
          <view class="icon">
            <image src="https://qn.boruichengyi.com/static/index/icon/edit.png" mode=""></image>
          </view>
        </view>
        <view class="hobyinfor">{{ hobby }}</view>
      </view>
      <!-- 我的相册 -->
      <view class="myphoto">
        <view class="title">
          <view class="h2">
            <view class="line"></view>
            <text>TA的相册</text>
          </view>
          <view class="more" @click="gootherablum(otheruserinfo.images_arr)">更多</view>
        </view>
        <view class="photos">
          <image :src="item" mode="aspectFill" v-for="(item, index) in otherhomeimglist" :key="index" @click="previewimg"></image>
        </view>
      </view>
      <!-- 我的活动 -->
      <view class="myact">
        <view class="title">
          <view class="h2">
            <view class="line"></view>
            <text>TA的活动</text>
          </view>
          <view class="more" @click="goheract">更多</view>
        </view>
        <view class="listBox" v-if="Object.values(currenact).length != 0">
          <view class="itemlistBox">
            <view class="itemList" @click="goheract">
              <view class="img">
                <image :src="currenact.cover_image" mode="aspectFill"></image>
                <view :class="{ hit: true, full: currenact.status_texts == '已报满' }">{{ currenact.status_texts }}</view>
              </view>
              <view class="textt">
                <view class="h2">{{ currenact.title }}</view>
                <view class="time">
                  <image src="../static/icon/time.png" mode="" class="icon"></image>
                  <view class="tim" style="flex: 1">{{ currenact.start_time_text + '-' + currenact.end_time_text }}</view>
                </view>
                <view class="space">
                  <image src="../static/icon/positon.png" mode="" class="icon"></image>
                  <view class="spac" style="flex: 1">{{ currenact.address }}</view>
                </view>
                <view class="peoplenum">
                  <view>
                    <view class="initiator">发起人：{{ currenact.user_info.nickname }}</view>
                    <view class="num">报名人数：{{ currenact.activity_user_num + '/' + currenact.max_num }}</view>
                  </view>
                  <button type="primary" class="sign">报名</button>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <kefu></kefu>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userid: null,
      currenact: {},
      otheruserinfo: {},
      otherhomeimglist: [],
      hobby: '',
      followshow: false,
      pusherid: '' // 防止发布者关注自己
    };
  },
  async onLoad(value) {
    console.log(value.id);
    this.userid = value.id;
    this.pusherid = JSON.parse(uni.getStorageSync('userinfo')).user_id;
    await this.getotheringo(value.id);
    if (this.pusherid != this.otheruserinfo.id) {
      this.followshow = true;
    } else {
      this.followshow = false;
    }
  },
  onShow() {},
  methods: {
    // 点击关注
    async tofans(id) {
      console.log('是否是粉丝', this.otheruserinfo.is_fans);
      if (this.otheruserinfo.is_fans == 1) {
        return;
      }
      const res = await uni.$http.post('user/operaUser', {
        to_user_id: id
      });
      console.log(res);
      this.getotheringo(this.userid);
    },
    // 预览个人相册
    previewimg() {
      uni.previewImage({
        urls: this.otherhomeimglist
      });
    },
    // 获取他人信息
    async getotheringo(id) {
      const res = await uni.$http.post('user/index', {
        user_id: id,
        token: JSON.parse(uni.getStorageSync('userinfo')).token
      });
      console.log(res);
      this.otheruserinfo = res.data.data;

      this.otherhomeimglist = this.otheruserinfo.images_arr.length > 3 ? this.otherhomeimglist.concat(this.otheruserinfo.images_arr) : this.otheruserinfo.images_arr;
      if (this.otherhomeimglist.length > 3) {
        this.otherhomeimglist = this.otherhomeimglist.splice(0, 3);
      }

      let hobbylist = [];
      this.hobby = this.otheruserinfo.label_arr.forEach((item) => {
        for (let i = 0; i <= this.otheruserinfo.label_ids.split(',').length; i++) {
          if (item.id == this.otheruserinfo.label_ids.split(',')[i]) {
            hobbylist.push(item);
          }
        }
      });
      this.hobby = hobbylist
        .map((item) => {
          return item.name;
        })
        .join(',');
      if (this.otheruserinfo.activity_info.length == 0) {
        return;
      }
      this.currenact = this.otheruserinfo.activity_info;
      this.currenact.end_time_text =
        this.currenact.end_time_text.split('-')[1] + '-' + this.currenact.end_time_text.split('-')[2].split(':')[0] + ':' + '01-15 01:00:00'.split(':')[1];
      this.currenact.start_time_text =
        this.currenact.start_time_text.split('-')[1] + '-' + this.currenact.start_time_text.split('-')[2].split(':')[0] + ':' + '01-15 01:00:00'.split(':')[1];
    },
    // 跳转到他的活动
    goheract() {
      uni.navigateTo({
        url: '/sub_active/moreactive/moreactive?id=' + this.userid
      });
    },
    // 跳转到他的相册
    gootherablum(imagelist) {
      uni.navigateTo({
        url: '/sub_active/otherablum/otherablum?imagelist=' + imagelist
      });
    }
  }
};
</script>

<style lang="less" scoped>
.content {
  .top {
    margin-bottom: 210rpx;
    .status_bar {
      height: 80rpx;
      width: 100%;
      position: relative;
      z-index: -99;
      image {
        width: 100%;
        height: 700rpx;
      }
    }
    .mine {
      text-align: center;
      font-weight: 600;
    }
    .portrait {
      margin-top: 66rpx;
      .set {
        display: flex;
        justify-content: flex-end;
        margin-right: 30rpx;
        image {
          width: 40rpx;
          height: 40rpx;
        }
      }
      .portrait_logo {
        display: flex;
        flex-direction: column;
        align-items: center;
        .logo {
          display: flex;
          align-items: center;
          box-sizing: border-box;
          image {
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
            vertical-align: middle;
            margin-left: 290rpx;
          }
          .follow {
            box-sizing: border-box;
            width: 130rpx;
            height: 50rpx;
            text-align: center;
            line-height: 50rpx;
            font-size: 28rpx;
            margin-left: 150rpx;
            color: #fff;
            background-color: red;
          }
          .already {
            background-color: #bbbbbb !important;
          }
          .userself {
            margin: 0 !important;
          }
        }
        .name {
          margin-top: 46rpx;
          font-size: 32rpx;
          font-weight: bold;
          color: #ffffff;
        }
        .message,
        .school {
          font-size: 24rpx;
          font-weight: 500;
        }
        .message {
          margin-top: 20rpx;
        }
        .school {
          margin-top: 10rpx;
        }
      }
    }
  }
  .main {
    padding: 0 24rpx;
    box-sizing: border-box;
    .myinformation,
    .myhobies,
    .myphoto,
    .myact {
      display: flex;
      flex-direction: column;
      .title {
        display: flex;
        justify-content: space-between;
        .h2 {
          display: flex;
          align-items: center;
          font-size: 28rpx;
          font-weight: 800;
          .line {
            width: 6rpx;
            height: 30rpx;
            background: #0398ff;
            border-radius: 100rpx;
            margin-right: 10rpx;
          }
        }
        .icon {
          image {
            width: 30rpx;
            height: 30rpx;
          }
        }
      }
      .detailinfor,
      .hobyinfor {
        display: flex;
        justify-content: space-between;
        padding: 0 34rpx;
        margin: 30rpx 0 40rpx 0;
        font-size: 26rpx;
        font-weight: 500;
        color: #333333;
      }
    }
    .myphoto,
    .myact {
      .more {
        font-size: 26rpx;
        font-weight: 500;
        color: #0398ff;
      }
      .photos {
        display: flex;
        margin: 20rpx 0rpx 24rpx 0;
        image {
          width: 198rpx;
          height: 260rpx;
          border-radius: 20rpx;
          margin-right: 30rpx;
        }
      }
      .listBox {
        width: 702rpx;
        display: flex;
        flex-direction: column;
        .itemlistBox {
          display: flex;
          flex-direction: column;
          height: 350rpx;
          background: #e8f6ff;
          border-radius: 20rpx;
          margin: 20rpx 0;
          padding: 20rpx 0 20rpx 20rpx;
          box-sizing: border-box;
          position: relative;
          .itemList {
            display: flex;
            .sign {
              width: 160rpx;
              height: 60rpx;
              line-height: 60rpx;
              position: absolute;
              bottom: 30rpx;
              right: 34rpx;
              border-radius: 100rpx;
              font-size: 24rpx;
              background-color: #0398ff;
            }
            .img {
              display: flex;
              width: 220rpx;
              height: 300rpx;
              margin-right: 20rpx;
              position: relative;
              image {
                width: 100%;
                height: 100%;
              }
              .hit {
                position: absolute;
                top: 0;
                left: 0;
                width: 90rpx;
                height: 40rpx;
                background: #000000;
                border-radius: 20rpx 0rpx 20rpx 0rpx;
                opacity: 0.5;
                font-size: 20rpx;
                color: #ffffff;
                line-height: 40rpx;
                text-align: center;
              }
              .full {
                background-color: #ec1303 !important;
                opacity: 0.8;
              }
            }
            .textt {
              width: 392rpx;
              height: 100%;
              display: flex;
              flex-direction: column;

              .h2 {
                // flex: 1;
                font-size: 28rpx;
                font-weight: 800;
                color: #222222;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                text-overflow: ellipsis;
                overflow: hidden;
              }
              .time,
              .space {
                display: flex;
                align-items: center;
                margin-top: 22rpx;
                .icon {
                  width: 23rpx;
                  height: 23rpx;
                }
              }
              .peoplenum {
                display: flex !important;
                .initiator,
                .num {
                  margin-top: 20rpx;
                  font-size: 24rpx;
                }
              }
              .time {
                .tim {
                  font-size: 26rpx;
                  font-weight: 500;
                  color: #222222;
                }
              }
              .space {
                .icon {
                  width: 23rpx;
                  height: 23rpx;
                }
                .spac {
                  font-size: 26rpx;
                  font-weight: 500;
                  color: #333333;
                  display: -webkit-box;
                  -webkit-line-clamp: 1;
                  -webkit-box-orient: vertical;
                  text-overflow: ellipsis;
                  overflow: hidden;
                }
              }
            }
          }
          .timeday {
            font-size: 26rpx;
            font-weight: 500;
            color: #333333;
            margin: 34rpx 0 42rpx 0;
          }
        }
      }
    }
  }
}
</style>
